<template>
    <ul class="navSelector">
      <li @click="handleItemCLick(item)" class="navSelector-item" v-for="item in list" :key="item" :class="{'item-active': active === item}">
        {{item}}
      </li>
    </ul>
</template>

<script>
  export default {
    name: 'navSelector',
    props: {
      list: {
        type: Array,
        default: ['试卷总览', '试题分析', '成绩单', '学生报告']
      },
      active: {
        type: String,
        default: '试卷总览'
      }
    },
    data () {
      return {}
    },
    methods: {
      handleItemCLick (item) {
        this.$emit('click', item)
      }
    }
  }
</script>

<style scoped>
  .navSelector {
    width: 670rpx;
    margin: 0 auto;
    display: flex;
  }

  .navSelector-item {
    flex: 1;
    border: 1px solid rgba(51, 170, 255, 1);
    border-right: none;
    text-align: center;
    height: 76rpx;
    line-height: 76rpx;
    color: rgba(51, 170, 255, 1);
  }

  .navSelector-item:first-child {
    border-bottom-left-radius: 40rpx;
    border-top-left-radius: 40rpx;
  }

  .navSelector-item:last-child {
    border-right: 1px solid rgba(51, 170, 255, 1);
    border-bottom-right-radius: 40rpx;
    border-top-right-radius: 40rpx;
  }

  .item-active {
    background: rgba(51, 170, 255, 1);
    color: #fff;
  }
</style>
